<style lang='less'>
</style>
<template>
  <div class="">
    <header class="h-modal-header">新增应用</header>
    <div style="padding:15px">
      <Form ref="form" :model="form_data" :rules="form_rule" :labelWidth="110" :showErrorTip=true>
         <FormItem label="应用名称" prop="app_name" v-width="300" >
            <input type="text" v-model="form_data.app_name" >
        </FormItem>
        <FormItem label="应用图标" prop="app_icon" v-width="300">
            <input type="text" v-model="form_data.app_icon" @click="showIconModal">
        </FormItem>
        
        <FormItem label="应用路由" prop="app_route" v-width="300">
            <input type="text" v-model="form_data.app_route">
        </FormItem>
        <FormItem label="应用描述" prop="app_desc" v-width="300">
            <textarea type="text" v-model="form_data.app_desc"></textarea>
        </FormItem>
      </Form>
    </div>
    <!-- h-modal-footer 将自带modal底部样式 -->
    <footer class="h-modal-footer">
      <button class="h-btn h-btn-primary" @click="addsubmit">确定</button>
      
      <button class="h-btn" @click="close">关闭</button>
    </footer>
  </div>
</template>
<script>
export default {
  data() {
    return {
      required: true,
      form_data:{
        app_name:'',
        app_route:'',
        app_desc:'',
        app_icon:''
      },
      form_rule:{
        required:[
          'app_route',
          'app_name',
          'app_desc',
          'app_icon'
        ]
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      
    },
    addsubmit(){
        this.$emit('addsubmit', this.form_data);
        let validResult = this.$refs.form.valid();
        console.log(validResult)
      if (validResult.result) {
        this.$Message('验证成功');
        //this.$refs.form.resetValid();
        //this.close();
      }else{
        this.$Modal({
        title: '提示',
        content: '请根据提示检查数据是否正确',
        buttons: [{
          type: 'cancel',
          name: '确认',
          color: 'primary'
        }]
      });
      }
        
    },
    close() {
      this.$emit('add-modal-close');
    },
    showIconModal(){
      console.log('打开图标选择')
    }
  },
  computed: {
    
  }
}
</script>